<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/common/includes.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<title>zzzzzz - Sign up</title>
	<%@ include file="/WEB-INF/common/meta.jsp" %>
	<%@ include file="/WEB-INF/common/global_res.jsp" %>
	<script type="text/javascript" src="${ctx}/res/jquery/validate/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${ctx}/res/jquery/validate/messages_zh_CN.js"></script>

	<script type="text/javascript">
		$(function() {
			$("#email").focus();
			$('#signupForm').validate(
					{
						rules : {
							email : {
								required : true,
								email : true ,
								remote: "${ctx}/account/is_email_existing"
							},
							username : {
								minlength : 2,
								required : true
							},
							password : {
								minlength : 6,
								required : true
							},
							confirmPassword : {
								minlength : 6,
								required : true,
								equalTo : '#password'
							}
						},
						messages : {
							email : {
								remote : "此郵箱已登記"
							}
						},
						highlight : function(label) {
							$(label).closest('.control-group').addClass('error');
						},
						success : function(label) {
							$(label).closest('.control-group').addClass('success');
						}
					});
		});
	</script>
</head>
<body>

<%@ include file="/WEB-INF/common/header.jsp" %>

<div class="container">
	<div class="row">
		<div class="span12">
			<h3>Join us now.</h3>
			
			<form:form id="signupForm" action="${ctx}/signup" method="post" modelAttribute="signupForm" class="form-horizontal">
				<fieldset>
					<div class="control-group">
						<form:label path="email" cssClass="control-label">Email</form:label>
						<div class="controls">
							<form:input path="email" cssClass="input-large" placeholder="Email"  />
							<form:errors path="email" cssClass="text-error" />
						</div>
					</div>
					<div class="control-group">
						<form:label path="username" class="control-label">Username</form:label>
						<div class="controls">
							<form:input path="username" cssClass="input-large" placeholder="Username" />
							<form:errors path="username" cssClass="text-error" />
						</div>
					</div>
					<div class="control-group">
						<form:label path="password" class="control-label">Password</form:label>
						<div class="controls">
							<form:password path="password" cssClass="input-large" placeholder="Password" />
							<form:errors path="password" cssClass="text-error" />
						</div>
					</div>
					<div class="control-group">
						<form:label path="confirmPassword" class="control-label">Confirm Password</form:label>
						<div class="controls">
							<form:password path="confirmPassword" cssClass="input-large" placeholder="Confirm Password" />
							<form:errors path="confirmPassword" cssClass="text-error" />
						</div>
					</div>
					<div class="control-group">
					  <div class="controls">
					    <button type="submit" class="btn">Sign up</button>
					  </div>
					</div>
				</fieldset>
			</form:form>
		</div>
	</div>
</div>

<%@ include file="/WEB-INF/common/footer.jsp" %>

</body>
</html>